<template>

    <div class="check-modal green_modal" :class="{ 'show' : isShow  }" 
    @click="closeModal()">
        <div class="modal_container" @click.stop>
            <div class="modal_title">
                <h1>手术前核查</h1>
            </div>
            <div class="modal_content">
               <h1>手术部位：<span class="ops_name">左眼（OS)</span></h1>
               <ul>
                    <li>
                        <h1>姓名:欧阳安俊</h1>
                    </li>
                    <li>
                        <h1>病区:综合二区</h1>
                    </li>
                    <li>
                        <h1>术者:何妙春(四级）</h1>
                    </li>
               </ul>
               <h1>
                    手术方式:左眼白内障超声乳化抽吸术；人工晶体一期植入术(IOL)
               </h1>
            </div>
            <div class="modal_footer">
                <button class="btn btn_defalut left" @click="closeModal()" >
                    确定
                </button>
                <button class="btn btn_white right" @click="closeModal()">
                    等待
                </button>
            </div>
        </div>

        <div class="modal_ops_detail" @click="scale()" @click.stop>
            <img src="@/assets/img/check_ops.png" class="deflaut_icon" alt="icon" :class="{ 'scaleImg' : scaleImg  }"/>
        </div>
    </div>

</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue,
        Watch
    } from 'vue-property-decorator';

    @Component


    export default class Check extends Vue {
        @Prop({
            type: Boolean, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: '' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数 
        }) toStartBlock!: Boolean;

        isShow = this.toStartBlock;

        scaleImg=false;

        @Watch('toStartBlock')

        ontoStartBlockChanged(val: boolean, oldVal: boolean) {
            this.isShow = val;
        }

        created() {
           
        }

        closeModal() {
            this.isShow=false;
            this.$emit('closeModal', this.isShow);
        }

        scale(){
            if(this.scaleImg){
                this.scaleImg=false;
            }else{
                this.scaleImg=true;
            }
        }

       


    }
</script>


<style lang="scss" scoped>
    .check-modal {
        @include modal_bg;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: $modal_index;
        display: none;

        .modal_container {   
            height: 500px;
            width: 80%;
            @include box_shadow;

            .modal_title {
                text-align: left;
                padding: 12px;
                font-size:0.3rem;
                padding-left:60px;
                margin-bottom:30px;
                h1{
                    text-align:left
                }
            }

            .modal_content {
                padding: 0 12px;
                
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
               
                font-size:0.3rem;
                text-align:left;
                margin-left:60px;
                .ops_name{
                    font-size:0.4rem;
                    color:#e5d50e;
                }
                h1{
                    margin-bottom:20px;
                }
                textarea{
                    margin-top: 20px;
                    height: 230px;
                    width: 100%;
                    margin: auto;
                    font-size:0.16rem;
                    border: 1px solid #999;
                }
            }

            .modal_footer{
                position: absolute;
                bottom: 0;
                padding: 30px 60px;
                width: 100%;
                .btn{
                    margin: 0;
                    font-size: 0.4rem;
                  
                    width: 150px;
                    height: 80px;
                }
            }
            .modal_close,.modal_right {
                img {
                    width: 45px;
                    position: absolute;
                    right: -18px;
                    top: -18px;
                }
            }
            .modal_right{
                img{
                    left: -18px;
                }
            }
        }
        .modal_ops_detail{
            img{
                position: absolute;
                right: 0;
                bottom: 0;
                width: 180px;
                &.scaleImg{
                    width:580px;
                }
            }
           
        }
    }
</style>